<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>我的足迹</title>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			body{background:#f5f5f5;overflow: auto;}
			.mui-bar-nav{position: relative;width:100%;background:#fff;color:#000;height: 2.6rem;background: url(../../images/work/track_banner.png) no-repeat center top;background-size: 100%;}		
			.track_content{width:3.9rem; height: 1.06rem; line-height: 1rem; font-size: .3rem; text-align: center;color: #fff; border: 1px solid rgba(255,255,255,0.4); padding: .04rem; margin: 0.8rem auto 0 auto; box-sizing: border-box;}	
			.track_content>p{color: #fff; border: 1px solid rgba(255,255,255,0.4);height: 0.93rem;}

			.mui-content,ul{padding: 0 !important;margin: 0 !important;overflow: scroll;}
			.mui-content{background:#f5f5f5;}
			.mui-content .ul_box{margin: 0.2rem auto;width: 7.02rem;}
			.mui-content div .title{font-size: 0.3rem;color: #666666;padding: .05rem 0 .05rem 0rem; background-color: #f5f5f5; line-height: 23px; position: relative; z-index: 99;}
			.mui-content div ul{width: 7.02rem;margin: 0 auto !important;position: relative;}
			.mui-content div ul li{width: 100%;min-height: 1.42rem;position: relative;;background: #fff;border-radius: 0.2rem;margin-top: 0.21rem;z-index: 10;}
			.mui-content div ul li:nth-child(n-1){margin-bottom: 0.25rem;}
			.track_title{color: #333; padding: .3rem 0 .1rem .23rem; border-bottom: 1px solid #eee;font-size: .28rem}
			.track_title:after{position: absolute;right: 0; bottom: 0;left: 0px;height: 1px;content: ''; -webkit-transform: scaleY(.5);transform: scaleY(.5);background-color: #c8c7cc;}
			
			.track_title .ico_radius{display: inline-block; vertical-align: middle; width: 10px;height: 10px; border: 2px solid #1653fc; border-radius: 30px; margin: -.03rem .05rem 0 0;}
			.mui-media-body{margin-top: .2rem; width: 60%;font-size: .32rem}
			.mui-btn-outlined{border: 1px solid #169dfc; color: #169dfc; border: 1px solid #169dfc;}
			.mui-table-view-cell>a>.mui-btn{right: 15px;font-size: .28rem;padding: .1rem .2rem;}
			.mui-media{margin: 0!important;}
			.mui-table-view-cell{padding: .2rem .39rem;}
			.mui-table-view-cell:after{left: 20px;}
			.mui-table-view:after{background: none;}
			.mui-table-view>h3{color: #666666; padding-left:.5rem; font-size: .26rem}		
			.mui-content div ul .line{width: 0.04rem;height: 100%;background: #d3d9e0;position: absolute;top:-.5rem;left: 0.3rem; z-index:0;}
			.track_title02{border: none;}
			.track_title02:after{background: none;}
			.collect_box{padding: .2rem 0; box-sizing: border-box;}
			
		</style>
	</head>
	<body>
		<!-- 头部start -->
		<div class="mui-bar mui-bar-nav">
		    <div class="track_content">
		    		<p id="trackContentCount">您共留下了0个足迹</p>
		    </div>
		</div>
		<!-- 头部end -->	
		<div class="mui-content" id="scroll">
			<div class='ul_box'>
				<ul id="mui-table-view" class="mui-table-view">
					<div class="track_box mui-table-view-cells" v-if="is_behavior_show" v-for="behaviorRecord in behaviorRecordList">
						<div class="title">{{behaviorRecord.createTime}}</div>
						<li class="collect_box">
	                      <p class="track_title track_title02"><span class="ico_radius"></span>{{behaviorRecord.recordExplain}}</p>
						</li>
					</div>
					<div class="line"></div>
				</ul>			
			</div>
		</div>

	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/common.js"></script>
	<script src="../../js/jquery2.2.4.min.js"></script>
	<script src="../../js/mui.pullToRefresh.js"></script>
	<script src="../../js/mui.pullToRefresh.material.js"></script>
	<script src="../../js/vue.min.js"></script>
	<script src="../../js/app.js"></script>
	<script>
		var pageStart = 0;//当前页码
		var pageSize = 20;//每页显示的条数
		var maxPageNumber = 1;//最大页数
		var totalRows = 0;
			
		mui.init({
			pullRefresh: {
				container: "#scroll", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				  up: {//上拉加载
			            contentrefresh: '正在加载...',
			            auto:true,//可选,默认false.自动上拉加载一次
			            contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
			            callback: pullupRefresh
			       }
			}
		});
		
		$(function(){ 
			 $('#scroll').height($(window).height()-$('.mui-bar-nav').height()+'px')
		});
			
		var news = new Vue({
			  el: '#mui-table-view',
			  data: {
			  	behaviorRecordList:[],
			  	is_behavior_show:false
			  }
			  
		});
			
		/**
		 * 上拉加载页面数据
		 */
		function pullupRefresh() {
	        pageStart++;//翻下一页
	        if(pageStart<=maxPageNumber){
	       		loadMore(pageStart,pageSize);//具体取数据的方法
	        }else{
	        	mui('#scroll').pullRefresh().endPullupToRefresh(true);
	        }
		}
		
		function loadMore(pageStart,pageSize) {
		    var param = 'userId='+getUserId()+'&pageNumber=' + pageStart+ '&random=' + Math.random()+'&pageSize=' + pageSize;
			var url = 'appHttpService/queryNetUserBehaviorRecord.do';
		    utils.ajax(url, function(data) {
				data = JSON.parse(data);
				if(data.state == 0) {
					maxPageNumber = data.maxPageNumber;
					if(data.totalRows != undefined && data.totalRows != null){
						totalRows = data.totalRows; 
						if(totalRows>0){
							document.getElementById("trackContentCount").innerText='您共留下了'+totalRows+'个足迹';
						}
					}
					var rows = JSON.parse(data.netUserBehaviorRecordJson);
					if(rows != null && rows.length > 0){
						news.is_behavior_show = true;
						for (var i in rows) {
			                news.behaviorRecordList.push(rows[i]);
		                }
						if(data.total <pageSize){
							mui('#scroll').pullRefresh().endPullupToRefresh(true);
						}else{
							mui('#scroll').pullRefresh().endPullupToRefresh(false);
						}
					}else{
						mui('#scroll').pullRefresh().endPullupToRefresh(true);
					}
				}
			}, param);
			
		};
			
	</script>
</html>